<template>
	<view class="exchange-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="top">
				<view class="swiper-box" v-if="swiperList.length">
					<u-swiper :list="swiperList" :height="145" :indicator="true" keyName="image" indicatorMode="dot"></u-swiper>
				</view>
				<view class="type-list">
					<view :class="typeIndex==index?'type-item active':'type-item'" v-for="(item,index) in typeList"
						:key="index" @click="typeChange(index)">
						<view class="title">{{item.name}}</view>
					</view>
				</view>
				<view class="tab-list">
					<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList"
						:key="index" @click="tabsChange(index)">
						<view class="title">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="exchange-list" v-if="dataList.length>0">
				<view class="exchange-item" v-for="(item,index) in dataList" :key="index">
					<image :src="item.image" class="item-left"></image>
					<view class="item-center" v-if="typeIndex==0">
						<view class="item-title">{{item.name}}</view>
						<view class="item-time">老师:{{item.teacher_name}}</view>
						<view class="item-time">{{item.description}}</view>
					</view>
					<view class="item-center" v-if="typeIndex==1">
						<view class="item-title">{{item.name}}</view>
						<view class="item-time">已售:{{item.sales}}</view>
						<view class="item-price"><text class="unit">￥</text> {{item.price}}</view>
					</view>
					<view class="item-right">
						<view class="button button1"
							@click="$Tips('/pages/courses/saveCourses?card_id='+item.card_id+'&courses_id='+item.id)"
							v-if="typeIndex==0">预约
						</view>
						<view class="button button1" @click="$Tips('/pages/courses/coursesDetail?courses_id='+item.id)"
							v-if="typeIndex==1">
							购买
						</view>
					</view>
				</view>
			</view>
			<view class="class-list" v-if="dataList.length==0&&typeIndex==0&&goodsLoading">
				<view class="goods-add u-flex u-flex-column u-flex-items-center u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30">
					<view class="u-flex goods-add-btn u-flex-between u-flex-items-center">
						<view class="date_choose">日期选择</view>
						<view class="goods-add-txt u-m-l-20 u-flex u-flex-start u-flex-items-center"
							@click="showDate = true">
							<view>{{ classDateFormat }}</view>
							<u-icon name="arrow-right" size="14" :color="'#fff'"></u-icon>
						</view>
					</view>
				</view>
				<view class="content-box" style="margin-top: 20rpx;">
					<view
						class="u-flex u-flex-column u-flex-center u-flex-items-center merchant-box u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30 u-m-b-20"
						v-for="(item,index) in goodsList" :key="index" @click="$Toast('您还没有购买该课程，请先购买课程')">
						<view class="class-item u-flex u-flex-between u-flex-items-center">
							<view class="u-flex u-flex-start u-flex-column u-flex-items-start u-flex-1">
								<view class="class-name u-m-l-20" style="text-align: left;">{{item.course_name}}</view>
							</view>
							<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1">
								<view class="class-time">{{item.c_time}}</view>
							</view>
							<view class="u-flex u-flex-end u-flex-items-center u-m-r-20 u-flex-1">
								<view class="class-teacher-name">{{ item.teacher_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-datetime-picker ref="datetimePicker" :show="showDate" v-model="classDate" mode="date"
			:confirmColor="'#37AD53'" @cancel="showDate=false" @confirm="changeDateData()"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					name: '约课',
					status: '1',
				}, {
					name: '购课',
					status: '0',
				}],
				typeIndex: 0,
				tabsList: [],
				tabsIndex: 0,
				dataList: [],
				pageType: '1', //页面类型1-18888院校 2-淘玩 3-专项进阶
				swiperList: [],
				showDate: false,
				classDate: Number(new Date()),
				classDateFormat: this.formatTimestamp(Number(new Date())),
				goodsList: [],
				goodsLoading:false,
				labelId: ''
			}
		},
		onLoad(options) {
			if (options && options.index) {
				this.tabsIndex = options.index
			}
			this.labelId = options.id
			this.getInitData()
			this.getBannerList()
		},
		methods: {
			// 消费列表
			getMourserList() {
				this.goodsLoading = false
				this.$Api.merchant.timetableAll({
					page: 1,
					pageSize: 9999,
					type: '1',
					label_id: this.labelId,
					day: this.classDateFormat,
					course_category_id: this.tabsList[this.tabsIndex].id,
				}).then(res => {
					this.goodsLoading = true
					this.goodsList = res.data.data;
				});
			},
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = String(date.getFullYear());
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且保证两位数
				const day = String(date.getDate()).padStart(2, '0'); // 保证两位数
			
				return `${year}-${month}-${day}`;
			},
			changeDateData(e) {
				this.showDate = false;
				this.classDate = e.value;
				this.classDateFormat = this.formatTimestamp(this.classDate);
				this.getMourserList()
			},
			getBannerList() {
				this.$Api.common.getBannerList({
					type: 2
				}).then(res => {
					this.swiperList = res.data
				})
			},
			getInitData() {
				this.$Api.common.getIndexData().then(res => {
					this.tabsList = res.data[0].course_category_list
					this.queryList(1, 10)
				})
			},
			typeChange(index) {
				this.typeIndex = index
				this.refreshList()
			},
			tabsChange(index) {
				this.tabsIndex = index
				this.refreshList()
			},
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			queryList(pageNo, pageSize) {
				this.$Api.courses.getCourseList({
					page: pageNo,
					limit: pageSize,
					type: this.typeList[this.typeIndex].status,
					course_category_id: this.tabsList[this.tabsIndex].id
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
					this.getMourserList()
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.exchange-page {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F8;

		.type-list {
			width: 100%;
			height: 132rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFE9E5 100%);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.active:nth-child(1) {
				width: 50%;
				height: 100%;
				background: url("https://oss.bigchun.com/xiangshang/uploads/20241230/ae91b5fbccb0edc3873549510d57d16a.png") no-repeat;
				background-size: 100% 100%;
				color: #ffffff;
			}

			.active:nth-child(2) {
				width: 50%;
				height: 100%;
				background: url("https://oss.bigchun.com/xiangshang/uploads/20241230/1e23abb9a30b09e7f66dff740f7dc255.png") no-repeat;
				background-size: 100% 100%;
				align-items: center;
				color: #ffffff;
			}


			.type-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 36rpx;
				color: #232624;
			}
		}

		.tab-list {
			min-height: 86rpx;
			margin: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				position: relative;
				width: 332rpx;
				height: 88rpx;
				text-align: center;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 22rpx;
				}
			}

			.active {
				font-weight: bold;
				position: relative;
			}

			.active::after {
				content: '';
				position: absolute;
				width: 34rpx;
				height: 10rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #FF2903;
				border-radius: 6rpx;
			}
		}

		.exchange-list {
			background-color: #F7F8FA;

			.exchange-item {
				margin: 0 30rpx 20rpx;
				border-radius: 28rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1), inset 0rpx 2rpx 2rpx 0rpx #FFFFFF;

				.item-left {
					width: 156rpx;
					height: 156rpx;
					margin-right: 26rpx;
				}

				.item-center {
					flex: 1;
					height: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-title {
						font-weight: bold;
						font-size: 32rpx;
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.item-time {
						font-size: 26rpx;
						color: #565656;
						margin-top: 6rpx;
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.item-price {
						font-weight: bold;
						font-size: 40rpx;
						color: #FD463E;
						margin-top: 16rpx;

						.unit {
							font-size: 28rpx;
						}
					}
				}

				.item-right {
					height: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.button {
						width: 112rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 44rpx;
					}

					.button1 {
						color: #ffffff;
						background: linear-gradient(90deg, #FFB2A4 0%, #FF2903 100%);
					}
				}
			}
		}
		
		.class-list {
			border: 0.2rpx solid transparent;
		
			.goods-add {
				background: #F6F6F8;
				z-index: 1000;
				width: calc(100% - 60rpx);
		
				.goods-add-btn {
					background: linear-gradient(270deg, #20CE83 0%, #9FF79A 100%);
					border-radius: 8px;
					width: 100%;
					height: 80rpx;
		
					.date_choose {
						padding: 0 20rpx;
						font-size: 32rpx;
						color: #fff;
					}
		
					.goods-add-txt {
						padding: 0 20rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
			}
		
			.content-box {
				.merchant-box {
					background: #E5F9E8;
					border-radius: 6px;
					border: 1px solid #37AD53;
					position: relative;
		
					.class-item {
						width: 100%;
						font-weight: 400;
						font-size: 28rpx;
						color: #37AD53;
						line-height: 20px;
						text-align: right;
						font-style: normal;
		
						.class-name {}
		
						.class-time {}
		
						.class-teacher-name {}
					}
		
				}
			}
		}
	}
</style>